<template>
  <div v-if="!showHeader" class="header-container">
    <div class="header-input">
      <svg class="search_icon"><use :xlink:href="icons.searchIcon"></use></svg>
      <input class="search_input" type="text">
    </div>
    <div class="header-right">
      <div class="publish-btn" v-if="!isSearching">
        <svg><use :xlink:href="icons.publishIcon"></use></svg>
        <span>发布</span>
      </div>
      <div class="search-btn" v-else></div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import Icons from "../assets/icons.svg";

export default {
  name: "Headrer",
  data() {
    return {
      isSearching: false,
      defaultKeyWords: [],
      keyWord: '',
      icons: {
        publishIcon: `${Icons}#publish`,
        searchIcon: `${Icons}#search`
      }
    }
  },
  computed: {
    ...mapState(['showHeader'])
  },
}
</script>
<style lang="less" scoped>
@import "~theme/flex.less";

.header-container {
  width: 100vw;
  background-color: #ec0000;
  box-sizing: border-box;
  padding: 5vw 3.25vw 3vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  #myFlex.rcsb();

  .header-input {
    flex: 1;
    position: relative;

    .search_icon {
      width: 4vw;
      height: 4vw;
      position: absolute;
      left: 3vw;
      top: 3vw;
      fill: #666;
    }
    .search_input {
      width: 100%;
      height: 10vw;
      border-radius: 10vw;
      border: none;
      padding-left: 10vw;
      outline: none;
    }
  }

  .header-right {
    width: 12vw;
    height: 10vw;
    margin-left: 2vw;
  }
}

.publish-btn {
  width: 100%;
  height: 100%;
  #myFlex.ccsb();

  svg { fill: #FFF; width: 7.5vw; height: 7.5vw; }
  span { 
    color: #FFF; 
    font-size: 12px; 
    transform-origin: center;
    transform: scale(0.8) translateY(2px);
  }
}
</style>